<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
#plist li{list-style:none; width:50px; height:30px; float:left; margin-right:10px; background:#999; margin-bottom:10px; cursor:pointer}
#box div{clear:both; width:300px; height:200px; background:#ccc; display:none; font-size:30px; line-height:200px; color:white; text-align:center;}
#box div:nth-child(1){display:block}
#plist .purple{background:orange; color:white;}
</style>
<script src="jquery-1.11.0.js"></script>
<script>
$(function(){
	$('#plist li').hover(function(){
		$('#box div').hide()
		var x=$(this).index();
		$('#box div').eq(x).show();
		$('#plist li').removeClass('purple')
		$(this).addClass('purple')
		})
	})
</script>
</head>

<body>
<ul id="plist">
	<li class="purple">标题1</li>
	<li>标题2</li>
	<li>标题3</li>
	<li>标题4</li>
</ul>
<div id="box">
	<div>内容1</div>
	<div>内容2</div>
	<div>内容3</div>
	<div>内容4</div>
</div>
</body>
</html>
